<template>
  <div class="h-full">
    <fs-crud ref="crudRef" v-bind="crudBinding" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useFs, dict } from '@fast-crud/fast-crud';
import { useRemoteSearch } from '@/hooks';
import createCrudOptions from './crud';

const router = useRouter();
const route = useRoute();
const { fetchUrl, searchState, addOption } = useRemoteSearch('/user/options');

const apiPrefix = '/profile';
const context: any = {
  router,
  apiPrefix,
  columns: {
    user: {
      title: '用户',
      type: 'text',
      form: {
        component: {
          name: 'fs-dict-select',
          remote: true,
          filterable: true,
          placeholder: '请选择用户',
          options: searchState.data,
          onSearch(value: any) {
            fetchUrl(value);
          },
          loading: searchState.fetching
        },
        rule: [{ required: true, message: '请选择用户' }]
      },
      search: { show: true },
      column: {
        show: false
      },
      valueBuilder: (scope: any) => {
        addOption({
          label: scope.row.username,
          value: scope.row.user
        });
      }
    },
    username: {
      title: '用户',
      type: 'text',
      column: {
        width: 400
      },
      form: {
        show: false
      }
    },
    objType: {
      title: '对象类型',
      type: 'dict-switch',
      form: {
        value: false
      },
      dict: dict({
        data: [
          { value: 0, label: '短剧' },
          { value: 1, label: '分集' }
        ]
      })
    },
    type: {
      title: '类型',
      type: 'dict-switch',
      form: {
        value: false
      },
      dict: dict({
        data: [
          { value: 0, label: '点赞', color: 'success' },
          { value: 1, label: '收藏', color: 'warning' }
        ]
      })
    },
    objId: {
      title: '短剧/分集',
      type: 'text'
    }
  }
};

const { crudRef, crudBinding, crudExpose } = useFs({
  createCrudOptions,
  context
});

onMounted(() => {
  if (route.query.id) {
    console.log('onMounted...', route.query.id);
  }

  crudExpose.doRefresh();
});
</script>
